<template>
  <div class="bg-class">
    <el-container>
      <el-header v-if="ifHeaderShow">
        <el-card style="margin-top: 20px;">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-image :src="require('@/assets/title2.png')" />

            </el-col>
            <el-col :span="10">
              <el-button-group style="margin-top: 20px">
                <el-button type="info" @click="showIndex">首页</el-button>
                <el-button type="info" @click="showSchoolIntroduction">学校介绍</el-button>
                <el-button type="info" @click="showTeacherIntroduction">师资介绍</el-button>
                <el-button type="info" @click="showCooperation">合作单位</el-button>
                <el-button type="info" @click="showCourseIntroduction">课程介绍</el-button>
                <el-button type="info" @click="showEnrollmentGuide">招生简章</el-button>

              </el-button-group>
            </el-col>
            <el-col :span="4">
              <div style="margin-top: 20px">
                <el-button type="text" @click="showLogin">登录</el-button>
                <el-button type="text" @click="rePwd">找回密码</el-button>

              </div>

            </el-col>
          </el-row>
        </el-card>

      </el-header>
      <!--      首页-->
      <el-main v-if="ifShowIndex">
        <div style="padding: 20px ;margin-top: 50px">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in worksUrl" :key="item">
              <el-image :src="item" />
            </el-carousel-item>
          </el-carousel>
          <el-card class="mid-title" style="margin-top: 20px">
            <!--            <h3>小黄莺新闻</h3>-->
            <el-image :src="require('@/assets/news3.png')" />

          </el-card>

          <div style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card>
                    <a href="https://www.toutiao.com/group/6835765706340958733/" target="_blank">
                      <img src="https://p3.pstatp.com/list/190x124/pgc-image/S1H7Y8XAuJrJ2t">
                    </a>
                    <h3>乔丹再就“黑人之死”发声：作为非裔美国人，我们已被打压很多年</h3>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-card style="margin-top: 20px">
            <!--            <h3>通知公告</h3>-->
            <el-image :src="require('@/assets/notes1.png')" />

          </el-card>
          <div style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card>
                    <a href="http://jww.zjgsu.edu.cn/Articleshow.asp?bookid=1005610" target="_blank">
                      <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1408770759,2250169838&fm=26&gp=0.jpg">
                    </a>
                    <h3>学校举行第四期“互联网＋教学”研习营开营仪式</h3>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                  <br>
                  <el-card>
                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">
                      “针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？
                    </el-link>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>

          <!--          <div style="margin-top: 20px">-->
          <!--            <el-row :gutter="20">-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--            <el-row :gutter="20" style="margin-top: 20px">-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--            <el-row :gutter="20" style="margin-top: 20px">-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--            <el-row :gutter="20" style="margin-top: 20px">-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--              <el-col :span="12">-->
          <!--                <div class="grid-content bg-purple">-->
          <!--                  <el-card>-->
          <!--                    <el-link href="https://www.toutiao.com/group/6830578009435537924/">“针尖大的窟窿能漏过斗大的风”，习近平为何用此比喻作警示？-->
          <!--                    </el-link>-->

          <!--                  </el-card>-->
          <!--                </div>-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--          </div>-->

          <el-card style="margin-top: 20px">
            <!--            <h3>课程介绍</h3>-->
            <el-image :src="require('@/assets/course1.png')" />

          </el-card>
          <div style="margin-top: 20px">
            <el-row :gutter="40" style="margin-left: 40px ;text-align: center">
              <el-col v-for="course in courseList" :span="5">
                <el-card
                  shadow="hover"
                  style="width:70%;height:50%;margin-left: 20%;margin-top:10%;cursor:pointer"
                  @click.native="showCourseDetail(course)"
                >
                  <div style="text-align: center" @click="showCourseDetail(course)">{{ course.name }}课程</div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-button type="text" style="float: right;margin-right: 10%" @click="showCourseIntroduction ">More...
              </el-button>
            </el-row>
          </div>
          <el-dialog title="课程介绍" :visible.sync="courseVisible" center width="30%">
            <el-form :model="courseForm" label-width="80px">
              <el-form-item label="课程名称:">
                {{ courseForm.name }}
              </el-form-item>
              <el-form-item label="课程介绍:">
                {{ courseForm.introduce }}
              </el-form-item>
              <el-form-item label="幼儿要求:">
                {{ courseForm.childrenRequest }}
              </el-form-item>
              <el-form-item label="费用介绍:">
                {{ courseForm.costIntroduce }}
              </el-form-item>
              <el-form-item label="默认费用:">
                {{ courseForm.defaultCost }}
              </el-form-item>
              <el-form-item label="材料费用:">
                {{ courseForm.materialCost }}
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="courseVisible = false">关闭</el-button>
            </div>
          </el-dialog>
          <el-card style="margin-top: 20px">
            <!--            <h3>师资力量</h3>-->
            <el-image :src="require('@/assets/teachers1.png')" />

          </el-card>
          <div style="margin-top: 20px">
            <el-row :gutter="50">
              <el-col v-for="teacher in teacherList" :span="5" :offset="2">
                <el-card
                  shadow="hover"
                  style="margin-left: 40px;margin-top: 50px;cursor:pointer;height: 200px;width: 150px;position: relative"
                  @click.native="showTeacherDetails(teacher)"
                >
                  <div style="position: absolute;left: 30px">
                    <el-avatar
                      v-if="teacher.headPicUrl!=null"
                      :src="baseUrl+teacher.headPicUrl"
                      style="width: 100%;height: 120px"
                    />
                    <el-avatar v-else>未设置</el-avatar>
                  </div>
                  <div style="bottom: 0; position: absolute;left: 60px">
                    <el-button
                      type="text"
                      style="text-align: center;margin-top: 10%"
                      @click="showTeacherDetails(teacher)"
                    >
                      {{ teacher.teacherName }}
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-button
              type="text"
              style="float: right;margin-right: 10%"
              @click="showTeacherIntroduction"
            >More……
            </el-button>
            <el-dialog title="教师简介" :visible.sync="teacherVisible" center width="30%">
              <el-form :model="teacherForm" label-width="120px">
                <el-form-item label="姓名:">
                  {{ teacherForm.teacherName }}
                </el-form-item>
                <el-form-item label="工号:">
                  {{ teacherForm.jobNumber }}
                </el-form-item>
                <el-form-item label="手机:">
                  {{ teacherForm.teacherPhoneNumber }}
                </el-form-item>
                <el-form-item label="是否担任班主任:">
                  {{ teacherForm.headTeacher==true ? "是" : "否" }}
                </el-form-item>
                <el-form-item label="介绍:">
                  {{ teacherForm.teacherIntroduction }}
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="teacherVisible = false">关闭</el-button>
              </div>
            </el-dialog>

          </div>
        </div>

      </el-main>
      <!--合作单位页面'http://47.96.182.33:8081'+cooperation.url-->
      <el-main v-if="ifShowCooperation" style="height: 650px;margin-top: 100px">
        <div>
          <el-row>
            <el-col v-for="cooperation in cooperationList" :offset="2" :span="3" style="height: 230px">
              <el-tooltip placement="top">
                <div slot="content">{{ cooperation.introduction }}</div>
                <div style="text-align: center">
                  <el-card shadow="hover" style="height: 170px;">
                    <el-avatar v-if="cooperation.url==null" shape="square" style="width: 160px">{{ cooperation.name }}
                    </el-avatar>
                    <el-avatar v-else shape="square" :size="130" :src="baseUrl+cooperation.url" />
                  </el-card>
                  <div>
                    <p>{{ cooperation.name }}</p>
                  </div>
                </div>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          v-if="ifShowCooperation"
          style="margin-top: 10px;float: right"
          :current-page="pageCooperation.pageNumCooperation"
          :total="pageCooperation.totalSizeCooperation"
          :page-size="pageCooperation.pageSizeCooperation"
          layout="total,prev, pager, next, jumper"
          @current-change="handleCurrentChange_Cooperation"
        />
      </el-main>
      <!--学校介绍页面-->
      <main v-if="ifShowSchoolIntroduction">
        <div style="width:1300px; background: #DDDDDD;margin-left: auto; margin-right: auto;margin-top: 100px">
          <div style="text-align: center; padding-top: 30px">
            <h2>学校介绍</h2>
          </div>
          <div
            style="float: top; margin-top: 50px; width: 1000px; margin-left: auto; margin-right: auto; padding-bottom: 30px"
          >
            <p v-html="schoolIntroduction" />
          </div>

        </div>
      </main>
      <!--师资介绍页面-->
      <el-main v-if="ifShowTeacherIntroduction" style="height: 650px;margin-top: 100px">
        <div>
          <el-row :gutter="100">
            <el-col v-for="teacher in teacherList" :offset="2" :span="8" style="height: 180px">
              <el-card shadow="hover" style="height: 160px; cursor:pointer" @click.native="showTeacherDetail(teacher)">
                <!--teacher.headPicUrl-->
                <div>
                  <div style="float: left; margin-right: 20px">
                    <!--                    <el-image v-if="teacher.headPicUrl!=null" :src="'http://47.96.182.33:8081'+teacher.headPicUrl" fit="cover" style="width: 100px;height: 100px"/>-->
                    <!--                    <el-image v-else style="width: 100px;height: 100px">未设置</el-image>-->
                    <el-avatar
                      v-if="teacher.headPicUrl!=null"
                      :src="baseUrl+teacher.headPicUrl"
                      style="width: 100%; height: 100px"
                    />
                    <el-avatar v-else :size="80">未设置</el-avatar>
                  </div>
                  <div style="margin-left: 30px">
                    <p>姓名： {{ teacher.teacherName }}</p>
                    <p>工号： {{ teacher.jobNumber }}</p>
                    <p class="inline">介绍： {{ teacher.teacherIntroduction ? teacher.teacherIntroduction.substring(0,16) +
                      '...':'...' }}</p>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          v-if="ifShowTeacherIntroduction"
          style="margin-top: 10px;float: right"
          :current-page="pageTeacher.pageNumTeacher"
          :total="pageTeacher.totalSizeTeacher"
          :page-size="pageTeacher.pageSizeTeacher"
          layout="total,prev, pager, next, jumper"
          @current-change="handleCurrentChange_Teacher"
        />
      </el-main>
      <el-main v-if="ifShowCourseIntroduction" style="height: 650px">
        <div style="width: 100%;height: 250px;margin-top: 100px">
          <el-row :gutter="40" style="margin-left: 40px ;text-align: center">
            <el-col v-for="course in courseList" :span="10">
              <el-card
                shadow="hover"
                style="width:70%;height:25%;margin-left: 20%;margin-top:10%;cursor:pointer"
                @click.native="getCourseDetail(course.name,course.childrenRequest,course.costIntroduce,course.defaultCost,course.introduce,course.materialCost)"
              >
                <!--                <div style="width: 100%;height: 110%;margin-left: 1%;margin-right: 1%">-->
                <!--&lt;!&ndash;                  <el-avatar shape="square" :size="100"></el-avatar>&ndash;&gt;-->
                <!--                  {{course.name}}-->
                <!--                </div>-->
                <div style="text-align: center" @click="getCourseDetail(course.cid,course.name)"><span
                  style="font-weight: bolder;color: #263445"
                >{{ course.name }}课程开课啦!</span><span style="color: #263445">-----点击查看详情</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          v-if="ifShowCourseIntroduction"
          style="margin-top: 10px;float: right"
          :current-page="pageCourse.pageNumCourse"
          :total="pageCourse.totalSizeCourse"
          :page-size="pageCourse.pageSizeCourse"
          layout="total,prev, pager, next, jumper"
          @current-change="handleCurrentChange_Course"
        />
      </el-main>
      <el-main v-if="ifShowEnrollmentGuide" style="height: 650px;margin-top:100px">
        <el-form :inline="true" style="margin-left: 120px">
          <el-form-item>
            <div class="block">
              <span class="demonstration">年</span>
              <el-date-picker
                v-model="year"
                value-format="yyyy"
                style="width: 150px"
                type="year"
                placeholder="请选择年份"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <div>
              <span>季度</span>
              <el-select
                v-model="quarter"
                clearable="true"
                placeholder="请选择季度"
                style="width: 150px"
              >
                <el-option v-for="item in quarterOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle @click="getEnrollmentInfo" />
            <!--              <el-button type="primary" @click="getEnrollmentInfo">查询招生简章信息</el-button>-->
            <el-button v-if="chooseSearch" type="text" @click="getEnrollment">返回总列表</el-button>
          </el-form-item>
        </el-form>
        <div style="width: 100%;height: 250px">
          <el-row :gutter="40" style="margin-left: 40px">
            <el-col v-for="enroll in enrollmentList" :span="10">
              <el-card
                shadow="hover"
                style="margin-left: 50px;margin-top: 20px;cursor:pointer"
                @click.native="getEnrollDetail(enroll.bioeid)"
              >
                {{ enroll.year }}
                {{ enroll.quarter===1?'春季':enroll.quarter===2?'夏季':enroll.quarter===3?'秋季':enroll.quarter===4?'冬季':'' }}

                <span style="font-family: 宋体">{{ enroll.content ? enroll.content.replace(/<[^>]+>/g, "").substring(0,8)+ '...':'...' }}</span>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          v-if="ifShowEnrollmentGuide&&chooseAll"
          style="margin-top: 20px;float: right"
          :current-page="pageEnroll.pageNumEnroll"
          :total="pageEnroll.totalSizeEnroll"
          :page-size="pageEnroll.pageSizeEnroll"
          layout="total,prev, pager, next, jumper"
          @current-change="handleCurrentChange_Enroll"
        />
        <el-pagination
          v-if="chooseSearch&&ifShowEnrollmentGuide"
          style="margin-top: 20px;float: right"
          :current-page="pageSearch.pageNumSearch"
          :total="pageSearch.totalSizeSearch"
          :page-size="pageSearch.pageSizeSearch"
          layout="total,prev, pager, next, jumper"
          @current-change="handleCurrentChange_Enroll"
        />
      </el-main>
      <el-main v-if="ifShowTeacherDetail">
        <div style="color: #2b2f3a;width: 80%;margin-left: 10%;margin-top: 60px">
          <el-button type="primary" icon="el-icon-arrow-left" @click="teacherBack" />
          <span style="font-size: 35px;margin-left: 35%">教师详情页</span>
        </div>
        <div style="width: 1000px; margin-left:auto; margin-right:auto; padding-top: 60px">
          <div style="float: left; margin-right: 50px;margin-bottom: 30px">
            <el-avatar
              v-if="teacherDetail.headPicUrl!=null"
              style="width: 100%;height: 300px"
              :src="baseUrl+teacherDetail.headPicUrl"
            >
              <!--              <img :src="teacherDetail.headPicUrl"/>-->
            </el-avatar>
            <el-avatar v-else :size="250">{{ teacherDetail.teacherName }}</el-avatar>

          </div>
          <div>
            <span style="font-size:20px">
              姓名： {{ teacherDetail.teacherName }}<br><br>
              工号： {{ teacherDetail.jobNumber }}<br><br>
              手机： {{ teacherDetail.teacherPhoneNumber }}<br><br>
              是否担任班主任： {{ teacherDetail.headTeacher==true ? "是" : "否" }}<br><br>
            </span>
            <p style="line-height: 40px">
              介绍: {{ teacherDetail.teacherIntroduction }}
            </p>
          </div>
        </div>
      </el-main>
      <el-main v-if="ifShowCourseContent">
        <div style="color: #2b2f3a;width: 80%;margin-left: 10%;margin-top: 20px">
          <el-button type="primary" icon="el-icon-arrow-left" @click="courseBack" />
          <span style="font-size: 30px;margin-left: 35%">{{ courseContent.name }}课程介绍</span>
        </div>
        <div style="text-align: left;margin-top: 50px ;width: 80%;margin-left: 15%;color: #2b2f3a">
          <p style="width: 80%"><span style="font-weight: bolder;font-size: 20px">课程名称：&nbsp;&nbsp;</span><span>{{ courseContent.name }}</span>
          </p>
          <el-divider />
          <p style="width: 80%;line-height: 40px"><span style="font-weight: bolder;font-size: 20px;display: block">课程介绍： &nbsp;&nbsp;</span><span
            style="margin-left: 40px"
          >{{ courseContent.introduce }}</span></p>
          <el-divider />
          <p style="width: 80%"><span style="font-weight: bolder;font-size: 20px">幼儿要求： &nbsp;&nbsp;</span><span>{{ courseContent.childrenRequest }}</span>
          </p>
          <el-divider />
          <p style="width: 80%"><span style="font-weight: bolder;font-size: 20px">费用介绍： &nbsp;&nbsp;</span><span>{{ courseContent.costIntroduce }}</span>
          </p>
          <el-divider />
          <p style="width: 80%"><span style="font-weight: bolder;font-size: 20px">默认费用： &nbsp;&nbsp;</span><span>{{ courseContent.defaultCost }}</span>
          </p>
          <el-divider />
          <p style="width: 80%"><span style="font-weight: bolder;font-size: 20px">材料费用： &nbsp;&nbsp;</span><span>{{ courseContent.materialCost }}</span>
          </p>
          <el-divider />

        </div>
      </el-main>
      <el-main v-if="ifShowEnrollDetail" style="border-bottom:1px solid #000">
        <div style="color: #2b2f3a;width: 80%;margin-left: 10%;margin-top: 20px ;text-align: center">
          <el-button type="primary" style="float: left" icon="el-icon-arrow-left" @click="enrollBack" />
          <span style="font-size: 30px;padding-right: 70px">{{ enrollDetail.year }}年{{ enrollDetail.quarter===1?'春季':enrollDetail.quarter===2?'夏季':enrollDetail.quarter===3?'秋季':enrollDetail.quarter===4?'冬季':'' }}{{ enrollDetail.class_name }}{{ enrollDetail.type===0?'学校':'' }}招生简章</span>
        </div>
        <el-divider />
        <div style="text-align: left;margin-top: 50px ;width: 80%;height:540px;margin-left: 10%">
          <p style="margin-left: 10%" v-html="enrollDetail.content" />
          <br>
          <br>
        </div>
      </el-main>
      <el-footer v-if="ifFooterShow">
        <span style="color: #5a5e66;font-family: 宋体">
          <br>
          <div style="text-align: center">友情链接--联系我们</div>
          <div style="text-align: center"> Copyright ©浙师大幼儿园小黄莺艺术学校版权所有</div>
          <div style="text-align: center"> 浙ICP备 00000000号</div>
          <br>
        </span>
      </el-footer>
    </el-container>
    <el-dialog
      title="登录"
      center
      :visible.sync="loginVisible"
      width="30%"
      :before-close="closeLogin"
    >
      <el-form ref="loginForm" :model="loginForm" label-position="left" label-width="100px">
        <el-form-item label="username:" prop="userName">
          <el-input v-model="loginForm.username" />
        </el-form-item>
        <el-form-item label="password:" prop="password">
          <el-input v-model="loginForm.password" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleLogin">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="showRePwd"
      title="忘记密码"
      align="center"
      width="800px"
      :append-to-body="true"
      :before-close="openFun"
    >
      <el-steps :active="active" finish-status="success">
        <el-step title="账号核实" />
        <el-step title="选择密保工具" />
        <el-step title="验证信息" />
        <el-step title="修改密码" />
      </el-steps>
      <div v-show="showStatus[0]">
        <el-form style="margin-top: 20px" model="rePassword" label-width="100px">
          <el-form-item label="账号：">
            <el-input v-model="rePassword.userName" placeholder="请输入账号" />
          </el-form-item>
        </el-form>
        <el-button type="primary" style="margin-top: 12px;" @click="validUsername">下一步</el-button>
      </div>
      <div v-show="showStatus[1]">
        <el-form style="margin-top: 20px">
          <el-form-item>

            <el-radio v-model="radio" label="1">通过密保手机（系统将会向申述账户预留手机号码发送验证码，如果已预留手机号码可选择此项）</el-radio>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="handlePrev1">上一步</el-button>
        <el-button type="primary" style="margin-top: 12px;" @click="checkRadio">下一步</el-button>

      </div>
      <div v-show="showStatus[2]">
        <br><br>
        <p>已为您预留的密保手机发送了验证码，有效期为5分钟,请尽快完成验证。</p>
        <el-form label-width="100px">
          <el-form-item label="验证码：">

            <el-input v-model="rePassword.code" placeholder="请输入验证码" />
          </el-form-item>
        </el-form>
        <!--        还没有收到验证码？ 您可以尝试<el-button>再次发送</el-button>-->
        <el-button style="margin-top: 12px;" @click="handlePrev2">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="validCode">下一步</el-button>
      </div>
      <div v-show="showStatus[3]">
        <el-form form="rePassword" label-width="100px">
          <el-form-item prop="newPwd" label="新密码：">
            <el-input v-model="rePassword.newPwd" show-password placeholder="请输入新密码" />

          </el-form-item>
          <el-form-item prop="rePwd" label="重复密码：">
            <el-input v-model="rePassword.repwd" show-password placehode="再次输入密码" />

          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="handlePrev3">上一步</el-button>
        <el-button type="primary" style="margin-top: 12px;" @click="finishRePwd">下一步</el-button>
      </div>
      <!--      <div style="width: 100%;height: 300px">-->
      <!--        <el-form ref="sendInfo" style="margin-left: 50px" :model="sendInfo" :rules="sendRules" label-width="100px"-->
      <!--                 label-position="right">-->
      <!--          <el-form-item label="手机号：" align="left" prop="phone">-->
      <!--            <el-input v-model="sendInfo.phone" style="width: 220px"/>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="验证码：" prop="code">-->
      <!--            <div style="width: 300px;display: flex">-->
      <!--              <el-button style="width: 75px;" :disabled="sendInfo.disButton" @click="getCode('sendInfo')">{{-->
      <!--                sendInfo.butMessage }}-->
      <!--              </el-button>-->
      <!--              <el-input v-model="sendInfo.code" style="width: 140px"/>-->
      <!--            </div>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="密码：" align="left" prop="password">-->
      <!--            <el-input v-model="sendInfo.password" show-password style="width: 220px;"/>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="确认密码：" align="left" prop="passwordAgain">-->
      <!--            <el-input v-model="sendInfo.passwordAgain" show-password style="width: 220px;"/>-->
      <!--          </el-form-item>-->
      <!--          <el-button style="width: 300px;margin-left: -60px" type="primary" :disabled="!sendInfo.disButton"-->
      <!--                     @click="submit('sendInfo')">提交-->
      <!--          </el-button>-->
      <!--        </el-form>-->
      <!--      </div>-->
    </el-dialog>
  </div>
</template>
<script>
import { getIntroduction } from '../../api/school'
import { getTeacherList } from '../../api/teacher'
import { validUsername } from '@/utils/validate'
import { getAllCourse } from '../../api/course'
import { getEnrollmentInfo, getIntroductionOfEnrollment } from '../../api/enroll'
import { filterAsyncRoutes } from '@/store/modules/permission'
import { getAllCooperationList } from '../../api/cooperation'
import { getPhone, validCode, rePwd } from '../../api/validateCode'
import { getNews } from '../../api/news'
import { getExWorks } from '../../api/works'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    const code = (rule, value, callback) => {
      if (this.sendInfo.disButton && value === '') {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    const password = (rule, value, callback) => {
      if (this.sendInfo.disButton && value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const passwordAgain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.sendInfo.password) {
        callback(new Error('两次密码不同'))
      } else {
        callback()
      }
    }

    return {
      baseUrl: this.global.picBaseUrl,
      pic: require('../../assets/coursePic/pic.jpg'),
      enrollDetail: { // 招生简章
        class_name: '',
        content: '',
        year: '',
        quarter: '',
        type: ''
      },
      content: '\n' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.\n',
      courseContent: { // 课程详情
        name: '',
        childrenRequest: '',
        costIntroduce: '',
        defaultCost: '',
        introduce: '',
        materialCost: ''
      },
      ifShowEnrollDetail: false, // 是否显示招生简章详情页面
      ifShowCourseContent: false, // 是否显示课程详情页面
      ifHeaderShow: true, // header是否显示
      ifFooterShow: true, // footer是否显示
      pageTeacher: { // 师资页
        pageNumTeacher: 1,
        pageSizeTeacher: 6,
        totalPageTeacher: 0,
        totalSizeTeacher: 0
      },
      pageCourse: { // 课程页
        pageNumCourse: 1,
        pageSizeCourse: 8,
        totalPageCourse: 0,
        totalSizeCourse: 0
      },
      pageEnroll: { // 招生简章页
        pageNumEnroll: 1,
        pageSizeEnroll: 6,
        totalPageEnroll: 0,
        totalSizeEnroll: 0
      },
      pageSearch: { // 查找页
        pageNumSearch: 1,
        pageSizeSearch: 6,
        totalPageSearch: 0,
        totalSizeSearch: 0
      },
      pageCooperation: { // 查找页
        pageNumCooperation: 1,
        pageSizeCooperation: 8,
        totalPageCooperation: 0,
        totalSizeCooperation: 0
      },
      chooseAll: true,
      chooseSearch: false,
      quarter: '', // 季度
      year: '', //  年
      type: '', // 类型
      typeOptions: [
        {
          id: '0',
          name: '学校招生'
        },
        {
          id: '1',
          name: '教学班招生'
        }
      ],
      quarterOptions: [
        {
          id: '1',
          name: '春季'
        },
        {
          id: '2',
          name: '夏季'
        },
        {
          id: '3',
          name: '秋季'
        },
        {
          id: '4',
          name: '冬季'
        }
      ],
      schoolIntroduction: '',
      enrollmentList: [], // 招生简章列表
      courseList: [], // 课程列表
      teacherList: [], // 师资列表
      teacherDetail: {}, // 教师详情数据储存
      cooperationList: [], // 合作单位列表
      ifShowIndex: true,
      ifShowTeacherDetail: false, // 是否显示教师详情页
      ifShowEnrollmentGuide: false, // 是否显示招生简章el-main,
      ifShowCourseIntroduction: false, // 是否显示课程详情el-main,
      ifShowTeacherIntroduction: false, // 是否显示师资介绍el-main,
      ifShowSchoolIntroduction: false, // 是否显示学校介绍el-main,
      ifShowCooperation: false, // 是否显示学校介绍el-main,
      showRePwd: false,
      sendInfo: {
        phone: '',
        code: '',
        getCode: '',
        password: '',
        passwordAgain: '',
        disButton: false,
        butMessage: '验证码'
      },
      rePasswordRules: {
        newPwd: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/,
            message: '密码必须由字母数字组成,长度为8-18位'
          }
        ],
        rePwd: [
          { validator: passwordAgain, trigger: 'blur', required: true }
        ]
      },
      sendRules: {
        phone: [
          {
            required: true,
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'change'
          }
        ],
        code: [
          { validator: code, trigger: 'blur', required: true }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/,
            message: '密码必须由字母数字组成,长度为8-18位'
          }
          // {validator: password,trigger: 'blur',required: true}
        ],
        passwordAgain: [
          { validator: passwordAgain, trigger: 'blur', required: true }
        ]
      },
      loginForm: {
        username: 'zs',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      loginVisible: false,
      courseVisible: false,
      courseForm: {},
      teacherVisible: false,
      teacherForm: {},
      workUrls: [
        'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00360-2986.jpg',
        'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00386-3966.jpg',
        'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00200-4246.jpg',
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1765272165,3931968242&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1040137170,1724047452&fm=26&gp=0.jpg'
        // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        // 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ],
      worksUrl: [],
      active: 0,
      rePassword: {
        userName: '',
        newPwd: '',
        repwd: '',
        code: ''
      },
      showStatus: [true, false, false, false],
      radio: false,
      msg_id: ''
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.getCourse()
    this.getAllTeacher()
    this.getNews()
    this.getWorksUrl()
  },

  methods: {
    // 获得轮播作品
    getWorksUrl(){
      getExWorks({
        isOnHomePage: true,
        pageNum: 1,
        pageSize: 5
      }).then( res => {
        for ( var i = 0; i < res.data.list.length; i++) {
          this.worksUrl[i] = this.baseUrl + res.data.list[i].url
        }
      })
    },
    getNews() {
      getNews().then()
    },
    rePwd() {
      this.showRePwd = true
    },
    // showPwd() {
    //   if (this.passwordType === 'password') {
    //     this.passwordType = ''
    //   } else {
    //     this.passwordType = 'password'
    //   }
    //   this.$nextTick(() => {
    //     this.$refs.password.focus()
    //   })
    // },
    showLogin() {
      this.loginVisible = true
    },
    closeLogin() {
      this.loginVisible = false
    },
    handleLogin() {
      // this.$router.push({path: '/doLogin'})
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击显示课程介绍页面
    showCourseIntroduction() {
      this.ifShowIndex = false
      this.ifShowEnrollmentGuide = false
      this.ifShowTeacherIntroduction = false
      this.ifShowCourseIntroduction = true
      this.ifShowCooperation = false
      this.ifShowSchoolIntroduction = false
      this.getCourse()
    },
    // 点击显示招生简章页面
    showEnrollmentGuide() {
      this.ifShowIndex = false
      this.ifShowCourseIntroduction = false
      this.ifShowTeacherIntroduction = false
      this.ifShowEnrollmentGuide = true
      this.ifShowCooperation = false
      this.ifShowSchoolIntroduction = false
      this.getEnrollment()
    },
    // 获取课程列表
    getCourse() {
      getAllCourse({
        state: 1,
        pageNum: this.pageCourse.pageNumCourse,
        pageSize: this.pageCourse.pageSizeCourse
      }).then(res => {
        this.courseList = res.data.list
        this.pageCourse.pageNumCourse = res.data.page.pageNum
        this.pageCourse.pageSizeCourse = res.data.page.pageSize
        this.pageCourse.totalPageCourse = res.data.page.totalPage
        this.pageCourse.totalSizeCourse = res.data.page.totalSize
        // this.$message.success('请求课程列表成功！')
      })
        .catch(err => {
          this.$message.error('请求课程列表失败！')
        })
    },
    // 获取招生简章列表
    getEnrollment() {
      this.chooseSearch = false
      this.chooseAll = true
      getIntroductionOfEnrollment({
        pageNum: this.pageEnroll.pageNumEnroll,
        pageSize: this.pageEnroll.pageSizeEnroll
      }).then(res => {
        this.enrollmentList = res.data.list
        this.pageEnroll.pageNumEnroll = res.data.page.pageNum
        this.pageEnroll.pageSizeEnroll = res.data.page.pageSize
        this.pageEnroll.totalPageEnroll = res.data.page.totalPage
        this.pageEnroll.totalSizeEnroll = res.data.page.totalSize
        this.year = ''
        this.quarter = ''
        this.type = ''
        // this.$message.success('请求招生简章列表成功！')
      })
        .catch(err => {
          this.$message.error('请求招生简章列表失败！')
        })
    },
    // 查找招生简章
    getEnrollmentInfo() {
      if (this.year === '' && this.quarter === '' && this.type === '') {
        alert('请先选择查询依据！')
      } else {
        this.chooseAll = false
        this.chooseSearch = true
        getIntroductionOfEnrollment({
          pageNum: this.pageSearch.pageNumSearch,
          pageSize: this.pageSearch.pageSizeSearch,
          year: this.year,
          quarter: this.quarter,
          type: this.type
        }).then(res => {
          this.enrollmentList = res.data.list
          this.pageSearch.pageNumSearch = res.data.page.pageNum
          this.pageSearch.pageSizeSearch = res.data.page.pageSize
          this.pageSearch.totalPageSearch = res.data.page.totalPage
          this.pageSearch.totalSizeSearch = res.data.page.totalSize
          this.$message.success('请求招生简章列表成功！')
          if (res.data.list.length === 0) {
            this.$message.warning('暂无招生简章列表！')
          }
        })
          .catch(err => {
            this.$message.error('请求招生简章列表失败！')
          })
      }
    },
    // 课程分页
    handleCurrentChange_Course(val) {
      this.pageCourse.pageNumCourse = val
      this.getCourse()
    },
    // 招生简章分页
    handleCurrentChange_Enroll(val) {
      if (this.chooseSearch === false) {
        this.pageEnroll.pageNumEnroll = val
        this.getEnrollment()
      } else if (this.chooseSearch === true) {
        this.pageSearch.pageNumSearch = val
        this.getEnrollmentInfo()
      }
    },
    // 点击获取课程详情
    getCourseDetail(name, childrenRequest, costIntroduce, defaultCost, introduce, materialCost) {
      this.courseContent.name = name
      this.courseContent.childrenRequest = childrenRequest
      this.courseContent.costIntroduce = costIntroduce
      this.courseContent.defaultCost = defaultCost
      this.courseContent.introduce = introduce
      this.courseContent.materialCost = materialCost
      console.log(this.courseContent)
      this.ifHeaderShow = false
      this.ifShowCourseIntroduction = false
      this.ifFooterShow = false
      this.ifShowCourseContent = true
    },
    // 从课程详情页返回至列表
    courseBack() {
      this.ifShowCourseContent = false
      this.ifHeaderShow = true
      this.ifShowCourseIntroduction = true
      this.ifFooterShow = true
    },
    // 获取招生简章详情
    getEnrollDetail(id, content, year, quarter, type) {
      getEnrollmentInfo(id)
        .then(res => {
          // this.teacherList = res.data.list
          // this.pageTeacher.pageNumTeacher = res.data.page.pageNum
          // this.pageTeacher.pageSizeTeacher = res.data.page.pageSize
          // this.pageTeacher.totalPageTeacher = res.data.page.totalPage
          // this.pageTeacher.totalSizeTeacher = res.data.page.totalSize
          // console.log('listTeacher:', res.data.list)
          console.log(res.data)
          this.enrollDetail.content = res.data.content
          this.enrollDetail.year = res.data.year
          this.enrollDetail.quarter = res.data.quarter
          this.enrollDetail.class_name = res.data.class_name
          this.enrollDetail.type = res.data.type

          this.ifHeaderShow = false
          this.ifShowEnrollmentGuide = false
          this.ifFooterShow = true
          this.ifShowEnrollDetail = true
        })
    },
    // 从课程详情页返回至列表
    enrollBack() {
      this.ifShowEnrollDetail = false
      this.ifHeaderShow = true
      this.ifShowEnrollmentGuide = true
      this.ifFooterShow = true
    },
    // 获取教师列表
    getAllTeacher() {
      getTeacherList({
        isHeadTeacher: 0,
        pageNum: this.pageTeacher.pageNumTeacher,
        pageSize: this.pageTeacher.pageSizeTeacher
      }).then(res => {
        this.teacherList = res.data.list
        this.pageTeacher.pageNumTeacher = res.data.page.pageNum
        this.pageTeacher.pageSizeTeacher = res.data.page.pageSize
        this.pageTeacher.totalPageTeacher = res.data.page.totalPage
        this.pageTeacher.totalSizeTeacher = res.data.page.totalSize
        console.log('listTeacher:', res.data.list)
      })
        .catch(err => {
          console.log('error: 请求师资列表失败！')
        })
    },
    // 点击显示师资介绍页面
    showTeacherIntroduction() {
      this.ifShowIndex = false
      this.ifShowEnrollmentGuide = false
      this.ifShowCourseIntroduction = false
      this.ifShowTeacherIntroduction = true
      this.ifShowCooperation = false
      this.ifShowSchoolIntroduction = false
      this.getAllTeacher()
    },
    // 师资介绍翻页
    handleCurrentChange_Teacher(val) {
      this.pageTeacher.pageNumTeacher = val
      this.getAllTeacher()
    },
    // 显示师资详情
    showTeacherDetail(teacher) {
      this.teacherDetail = teacher
      this.ifHeaderShow = false
      this.ifShowTeacherIntroduction = false
      this.ifFooterShow = false
      this.ifShowTeacherDetail = true
    },
    // 从教师详情页返回
    teacherBack() {
      this.ifShowTeacherDetail = false
      this.ifHeaderShow = true
      this.ifShowTeacherIntroduction = true
      this.ifFooterShow = true
    },
    // 点击显示学校介绍
    showSchoolIntroduction() {
      this.ifShowIndex = false
      this.ifShowTeacherDetail = false
      this.ifShowEnrollmentGuide = false
      this.ifShowCourseIntroduction = false
      this.ifShowTeacherIntroduction = false
      this.ifShowSchoolIntroduction = true
      this.ifShowCooperation = false
      getIntroduction()
        .then(res => {
          this.schoolIntroduction = res.data.schoolIntroduction
        })
        .catch(err => {
          console.log('error: 请求学校介绍失败！')
        })
    },
    // 获取合作单位列表
    getCooperation() {
      getAllCooperationList({
        pageNum: this.pageCooperation.pageNumCooperation,
        pageSizeL: this.pageCooperation.pageSizeCooperation
      }).then(res => {
        this.cooperationList = res.data.list
        console.log('cooList', this.cooperationList)
        this.pageCooperation.totalPageCooperation = res.data.page.totalPage
        this.pageCooperation.totalSizeCooperation = res.data.page.totalSize
      })
        .catch(err => {
          console.log('error: 请求合作单位失败！')
        })
    },
    // 点击显示合作单位
    showCooperation() {
      this.ifShowIndex = false
      this.ifShowTeacherDetail = false
      this.ifShowEnrollmentGuide = false
      this.ifShowCourseIntroduction = false
      this.ifShowTeacherIntroduction = false
      this.ifShowSchoolIntroduction = false
      this.ifShowCooperation = true
      this.getCooperation()
    },
    // 合作单位列表翻页
    handleCurrentChange_Cooperation(val) {
      this.pageCooperation.pageNumCooperation = val
      this.getCooperation()
    },
    showIndex() {
      this.ifShowIndex = true
      this.ifShowTeacherDetail = false
      this.ifShowEnrollmentGuide = false
      this.ifShowCourseIntroduction = false
      this.ifShowTeacherIntroduction = false
      this.ifShowSchoolIntroduction = false
      this.ifShowCooperation = false
      this.getCourse()
    },
    showCourseDetail(course) {
      this.courseForm = course
      this.courseVisible = true
    },
    showTeacherDetails(teacher) {
      this.teacherForm = teacher
      this.teacherVisible = true
    },
    openFun() {
      this.showRePwd = false
    },
    validUsername() {
      getPhone({ userName: this.rePassword.userName }).then(res => {
        this.showStatus = [false, true, false, false]
        this.active = 1
        this.msg_id = res.data.msg_id
      }).catch(err => {
        this.$message.error('请求失败！')
      })
    },
    handlePrev1() {
      this.showStatus = [true, false, false, false]
      this.active = 0
    },
    handlePrev2() {
      this.showStatus = [false, true, false, false]
      this.active = 1
    },
    handlePrev3() {
      this.showStatus = [false, false, true, false]
      this.active = 2
    },
    checkRadio() {
      this.showStatus = [false, false, true, false]
      this.active = 2
    },
    validCode() {
      validCode({ code: this.rePassword.code, msg_id: this.msg_id }).then(res => {
        this.$message.success('验证成功！')
        this.showStatus = [false, false, false, true]
        this.active = 3
      }).catch(err => {
        this.$message.error('请求失败！')
      })
    },
    finishRePwd() {
      rePwd({
        userName: this.rePassword.userName,
        password: this.rePassword.repwd

      }).then(res => {
        this.$message.success('密码修改成功！')
        this.showRePwd = false
      }).catch(err => {
        this.showRePwd = false
        this.$message.error('请求失败！')
      })
    }

  }
}
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: #fff;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .inline {
      overflow: hidden;
      display: inline;
    }
  }
</style>

<!--轮播图-->
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    height: 100%;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
    height: 100%;
  }
</style>

<style>
  .mid-title {

  .el-card__body {
    /*padding: 10px;*/
  }

  }
</style>

<style>
  .bg-class {
    background: url("./bg1.jpg") center center repeat;
  }
</style>
